<template>
	<view>
		<view class="box">
			<view class="search_box">
				<view class="flex_box aic">
					<view class="re mr20" @tap="back">
						<image :lazy-load="true" src="/static/icon_arrow_1.png" class="vt img6"></image>
					</view>
					<view class="re item" style="font-weight: bolder;text-align: center;font-size: larger;">
						拖车列表
					</view>
					<view class="pl20 df fs26 cor_333" @click="screenShow();">
						<view>筛选</view>
						<image :lazy-load="true" src="/static/icon_screen.png" class="ml5 img7"></image>
					</view>
				</view>
			</view>

			<view class="menu_content_box_page">
				<view class="pl16 pr16">
					<view class="pt20">
						<view class="df fldr fw jcsb">
							<view class="shop_price_item" v-for="item, index in trailerList" :key="index">
								<view class="re">
									<image :lazy-load="true" :src="item.imgUrl" class="img2 vt" mode="aspectFill"></image>
								</view>
								<view class="content_area">
									<view class="fs26 lh36 ell">{{item.title}}</view>
									<view class="mt20 df aic">
										<image :lazy-load="true" src="/static/icon_location.png" class="img3" ></image>
										<view class="ml5 fs22 cor_808">{{item.place}}</view>
									</view>
									<view class="mt20 flex_box aic">
										<view class="item">
											<view class="fs30 fwb cor_F23"><text class="fs34">￥{{item.price}}</text>/公里
											</view>
										</view>
										<view class="contact_btn_sty" @tap="call(item.phone)">点击联系</view>
									</view>
								</view>
							</view>


							<view v-if="trailerList.length == 0" style="width: 100%;height: 100vh">
								<view style="height: 200rpx;"></view>
								<image :lazy-load="true" src="../../static/excavator.png" style="width: 100%; padding: 100rpx 200rpx;">
								</image>
								<view style="width: 100%;text-align: center;color: #808080;">暂无数据</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 筛选弹窗 -->
			<view class="screen_bomb_fix" :class="screenFlag ? 'show' : ''">
				<view class=" screen_popup_box">
					<view class="screen_content">
						<view class="ml5 fs28 fwb cor_5D5">筛选</view>

						<!-- 拖车吨位 -->
						<view class="mt30">
							<view class="ml5 fs26 cor_5D5">拖车吨位</view>
							<view class="unlimited_box" :class="{'active': weightId == 0}" @tap="weightId = 0">不限</view>
							<view class="df fldr fw">
								<view class="type_tab" :class="{'active': weightId == item.id}"
									v-for="item,index in weights" :key="index" @tap="weightId = item.id">
									<view class="">{{item.name}}</view>
								</view>
							</view>
						</view><!-- 拖车吨位 -->

						<!-- 区域 -->
						<view class="mt30">
							<view class="ml5 fs26 cor_5D5">区域</view>
							<view class="unlimited_box" :class="cityId == 0 ? 'active' : ''"
								@tap="cityId=0,cityName=''">不限</view>
							<view class="df fldr fw" v-if="cityId">
								<view class="active type_tab">{{cityName}}</view>
							</view>
						</view>
						<!-- 区域 -->

						<!-- 搜索 -->
						<view class="mt35">
							<view class="re">
								<input type="text" class="ipt_search_screen" placeholder="输入城市名"
									placeholder-style="color: #adadad;" v-model="citySearch"
									@confirm="citySearchConfirm" @input="citySearchConfirm">
								<image :lazy-load="true" src="/static/icon_search.png" class="icon_search_pos_screen"
									@tap="citySearchConfirm">
								</image>
							</view>
							<view class="mt20 region_box_sty">
								<!-- A -->
								<view v-for="item,index in AlphaCitys" :key="index" v-if="citySearchList.length == 0">
									<view class="pl15 pr15 h62 df aic cor_ada scaley_1">{{item.head}}</view>
									<view class="pl15 pr15 h62 df aic scaley_1" v-for="foo,bar in item.list" :key="bar" @tap="chooseCity(foo)">
										{{foo.name}}
									</view>
								</view>
								<!-- A -->
								
								<view>
									<view class=" pl15 pr15 h62 df aic scaley_1" v-for="j,k in citySearchList" v-if="citySearchList.length > 0"
										@tap="chooseCity(j)">
										{{j.name}}
									</view>
								</view>
							</view>
						</view>
						<!-- 搜索 -->



					</view>
					<!-- 按钮 -->
					<view class="screen_bottom_area aic jcc">
						<view class="reset_btn" @tap="clearSearch">重置</view>
						<view class="ml50 determine_btn" @click="searchTrailer()">确定</view>
					</view><!-- 按钮 -->
				</view>
				<view class="mask_bg" @click="screenHide();"></view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getPageTrailerApi,
		getTrailerFilterApi,
		searchCityListApi,
		getInitalCityApi,
		getUserInfoApi
	} from '@/http/api.js';

	export default {
		data() {
			return {
				screenFlag: false, //false代表筛选弹窗关闭着
				labelAreaFlag: false, //false代表筛选弹窗中的展开标签是没有显示多余的标签的
				keyword: '',
				weights: [],
				types: [],
				brands: [],
				trailerList: [],
				pageIndex: 1,
				pageSize: 10,
				weightId: 0,
				cityId: 0,
				title: '',
				cityName: '',
				citySearch: '',
				cities: [],
				AlphaCitys: [],
				citySearchList: []
			}
		},
		onLoad() {
			if (!uni.getStorageSync('userId')) {
				uni.navigateBack({
					delta: 1
				})
			}
			let that = this;
			this.getPageTrailer();
			this.getTrailerFilter();
			setTimeout(function() {
				that.getInitalCity();
			}, 1500);

		},
		onShow() {
			this.getUserInfo();
		},
		onReachBottom() {
			this.pageIndex = this.pageIndex + 1;
			this.getPageTrailer();
		},
		onBackPress(options) {
		    uni.redirectTo({
		    	url: '/pages/index/index'
		    })
			return true;
		},
		methods: {
			getUserInfo() {
				let that = this;
				getUserInfoApi({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (!res.data.beCompleteInfo) {
						uni.navigateTo({
							url: '/pages/personal_information/personal_information'
						})
					}
				}).catch(err => {})
			},


			clearSearch() {

				this.pageIndex = 0;
				this.pageSize = 10;
				this.title = '';
				this.cityId = 0;
				this.weightId = 0;
				this.cityName = '';
				this.citySearch = '';
				this.citySearchList = [];
			},
			getInitalCity() {
				getInitalCityApi({

				}).then(res => {
					this.AlphaCitys = res.data
					console.log(res);
				}).catch(err => {

				})
			},
			citySearchConfirm(e) {
				this.citySearch = e.detail.value;
				if (this.citySearch) {
					showLoading('加载中');
					searchCityListApi({
						name: this.citySearch
					}).then(res => {
						this.citySearchList = res.data;
						hideLoading();
					}).catch(err => {
						hideLoading();
					})
				} else {
					this.citySearchList = [];
				}
			},
			//选择城市
			chooseCity(city) {
				let that = this;
				this.cityId = parseInt(city.code);
				this.cityName = city.name;
			},
			getPageTrailer() {
				let that = this;
				showLoading('加载中');
				getPageTrailerApi({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					weightId: this.weightId,
					cityId: this.cityId,
					//title: this.title
				}).then(res => {
					if (res.data.data.length == this.pageSize) {
						that.pageIndex = res.data.currentPage + 1
					}
					for (let i in res.data.data) {
						that.trailerList.push(res.data.data[i]);
					}
					hideLoading();
				}).catch(err => {
					toast(err.msg);
					hideLoading();
				})
			},

			getTrailerFilter() {
				let that = this;
				getTrailerFilterApi({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					that.weights = res.data.weights;

				}).catch(err => {
					toast(err.msg);
				})
			},

			screenShow: function() { //筛选弹窗-打开
				this.screenFlag = true
			},
			screenHide: function() { //筛选弹窗-关闭
				this.screenFlag = false
			},
			labelAreaShow: function() { //展开标签
				this.labelAreaFlag = true
			},
			
			
			back() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},

			searchTrailer() {
				this.screenHide();
				this.currentPage = 1;
				this.pageIndex = 1;
				this.trailerList = [];
				this.getPageTrailer();
			}
		}
	}
</script>

<style>
		page { background: #f7f6f6 }
	.pl16 {
		padding-left: 16rpx;
	}

	.pr16 {
		padding-right: 16rpx;
	}

	.search_box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 85rpx 24rpx 25rpx;
		background-color: #fff;
		z-index: 3;
	}

	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 177rpx); */
		background-color: #f7f6f6;
		padding-top: 177rpx;
	}

	.ipt_search {
		display: inline-block;
		width: 100%;
		padding: 0 20rpx;
		height: 69rpx;
		line-height: 69rpx;
		font-size: 26rpx;
		text-align: left;
		color: #000;
		background-color: #F4F2F2;
		outline: none;
		border: none;
		vertical-align: top;
		border-radius: 35rpx;
	}

	.icon_search_pos {
		position: absolute;
		top: 21rpx;
		left: 46rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.shop_price_item {
		width: 350rpx;
		background-color: #fff;
		border-radius: 6rpx;
		margin-bottom: 15rpx;
		overflow: hidden;
	}

	.shop_price_item .content_area {
		padding: 15rpx 13rpx;
		height: 174rpx;
	}

	.contact_btn_sty {
		display: block;
		width: 112rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 22rpx;
		color: #fff;
		background-image: linear-gradient(90deg, #F44E33, #E10D09);
		border-radius: 24rpx 0 0 24rpx;
		margin-right: -13rpx;
	}

	.region_box_sty {
		font-size: 26rpx;
		color: #353535;
		background-color: #fff;
		border-radius: 16rpx;
	}
</style>
